<!-- Created Time:23/09/01 17:26:09 -->
<!-- Created By: Mande.Huang-->
<!-- Description: -->
<template>
  <Glass :softID="softID" class="window" v-if="isShow" ref="window">
    <div class="resizer nw"></div>
    <div class="resizer ne"></div>
    <div class="resizer sw"></div>
    <div class="resizer se"></div>
    <div class="top">
      <div class="actionbar">
        <li v-on:click="closeWindow" class="close"></li>
        <li v-on:click="miniWindow" class="minimun"></li>
        <li v-on:click="maxWindow" class="maxmum"></li>
      </div>
    </div>
    <div class="center">
      <slot name="contain"></slot>
    </div>
  </Glass>
</template>

<script>
import WindowResize from "../../MyUtils/WindowResize";
import { Draggable } from "gsap/all";
const local = require("../../MyUtils/localStorage");
export default {
  name: "Macwindow",
  props: ["softID"],
  data() {
    return {
      isFocus: false,
      isShow: true,
      isMaxm: false,
      posX: 0,
      posY: 0,
      height: 500,
      width: 700,
      index: 1000,
      softInfoOpened: [],
      draggableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.gsap.registerPlugin(Draggable);
    setTimeout(() => {
      let node = this.$el;
      this.posX = node.offsetLeft;
      this.posY = node.offsetTop;
      this.width = node.offsetWidth;
      this.height = node.offsetHeight;
      this.index = 1000;
      this.initAll();
    }, 1);
  },
  methods: {
    initAll() {
      this.setDragglable(true);
      this.ResizeWindowSize();
    },
    closeWindow() {
      this.softInfoOpened = this.store.state.programDock.softInfoOpened;
      for (let i = 0; i < this.softInfoOpened.length; i++) {
        if (this.softInfoOpened[i].id === this.softID) {
          this.softInfoOpened.splice(i, 1);
          local.SetItem(
            "OpenInfo",
            JSON.stringify(this.softInfoOpened),
            this.store,
            this.softInfoOpened
          );
          break;
        }
      }
      let tl = this.gsap.timeline();
      let node = this.$refs.window.$el;
      tl.to(node, {
        duration: 0.2,
        width: 0,
        height: 0,
        opacity: 0,
        onComplete: () => {
          this.$refs.window.$el.style.display = "none";
          this.$refs.window.$el.remove();
        },
      });
    },
    getID() {
      for (let i = 0; i < this.softInfoOpened.length; i++) {
        if (this.softID == this.softInfoOpened[i].id) {
          this.softInfoOpened[i].mini = true;
          this.softInfoOpened[i].isShow = false;
          this.softInfoOpened[i].isFocus = false;
          return i;
        }
      }
    },
    miniWindow() {
      // 最小化窗口
      if (this.isMaxm) return;
      this.softInfoOpened = this.store.state.programDock.softInfoOpened;
      const index = this.softID;
      const id = this.getID();
      local.SetItem(
        "OpenInfo",
        JSON.stringify(this.softInfoOpened),
        this.store,
        this.softInfoOpened
      );
      let window = this.$el;
      const rootFontSize = parseFloat(
        getComputedStyle(document.documentElement).fontSize
      );
      let tl = this.gsap.timeline();
      tl.to(window, {
        duration: 0.2,
        scaleX: 0,
        scaleY: 0,
        onComplete: () => {
          window.style.display = "none";
          this.bus.$emit("WindowMini", this, index, id);
        },
      });
    },
    maxWindow() {
      this.setDragglable(false);
      let window = this.$refs.window.$el;
      if (this.isMaxm) {
        this.isMaxm = false;
        let tl = this.gsap.timeline();
        tl.to(window, {
          duration: 0.2,
          width: this.width + "px",
          height: this.height + "px",
          left: this.posX,
          top: this.posY,
          borderRadius: 15 + "px",
          backgroundColor: "rgba(255, 255, 255, 0.4)",
          onComplete: () => {
            this.setDragglable(true);
            this.store.dispatch("changeHeaderState", true);
            this.store.dispatch("changeDockState", true);
          },
        });
      } else {
        this.isMaxm = true;
        let offsetWidth = document.body.clientWidth - 1;
        let offsetHeight = document.body.clientHeight - 1;
        let tl = this.gsap.timeline();
        tl.to(window, {
          duration: 0.2,
          width: offsetWidth,
          height: offsetHeight,
          x: 0,
          y: 0,
          top: 0,
          left: 0,
          backgroundColor: "#fff",
          onComplete: () => {
            this.store.dispatch("changeHeaderState", false);
            this.store.dispatch("changeDockState", false);
            window.style.opacity = 1;
            window.style.borderRadius = "0";
          },
        });
      }
    },
    setDragglable(isDragglable) {
      let node = this.$el;
      let triggerment = this.$el.querySelector(".top");
      this.draggableInstance = Draggable.create(node, {
        trigger: triggerment,
        bounds: "body",
        edgeResistance: 0.9,
        type: isDragglable ? "x,y" : "none",
        cursor: "default",
        onDragStart: (e) => {},
        onDrag: (e) => {},
        onDragEnd: (e) => {
          if (this.isMaxm) return;
          const regex = /-?\d+(\.\d+)?/g;
          const numbers = node.style.transform.match(regex).map(Number);
          this.posX = node.offsetLeft + numbers[1];
          this.posY = node.offsetTop + numbers[2];
          // 拿到当前home窗口下window窗口 修改聚焦属性
          let windowParent = this.$el.parentNode;
          windowParent.childNodes.forEach((item) => {
            item.__vue__.isFocus = false;
          });
          this.isFocus = true;
        },
      });
    },
    ResizeWindowSize() {
      if (this.isMaxm) return;
      WindowResize(this);
    },
    // 窗口聚焦 拿到之前聚焦到的窗口的zindex 将要聚焦的窗口的z-index +1
    Windowfocus() {
      this.$el.addEventListener("mousedown", (e) => {
        if (this.isFocus) {
          return;
        }
        const node = this.$el;
        let index = 0;
        // 拿到当前home窗口下window窗口
        let Home = node.parentNode;
        Home.childNodes.forEach((item) => {
          if (item.__vue__.isFocus) {
            index = item.style.zIndex;
          }
          item.__vue__.isFocus = false;
        });
        node.style.zIndex = 1 + index;
        this.index = node.style.zIndex;
        this.isFocus = true;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.window {
  position: absolute;
  top: 100px;
  left: 300px;
  height: 60vh;
  width: 50vw;
  border-radius: 15px;
  cursor: default !important;
  .center {
    height: 100%;
    width: 100%;
  }
  .resizer {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: black;
    z-index: 1;
    opacity: 0;

    &.nw {
      top: -1px;
      left: -1px;
      cursor: nw-resize;
    }

    &.ne {
      top: -1px;
      right: -1px;
      cursor: ne-resize;
    }

    &.sw {
      bottom: -1px;
      left: -1px;
      cursor: sw-resize;
    }

    &.se {
      bottom: -1px;
      right: -1px;
      cursor: se-resize;
    }
  }

  .top {
    position: absolute;
    height: 30px;
    width: 100%;
    z-index: 1;
    .actionbar {
      position: absolute;
      height: 15px;
      display: flex;
      width: 50px;
      top: 15px;
      left: 10px;
      transition: all 0.2s ease-in-out;
      font-size: 7px;
      line-height: 15px;
      overflow: visible;

      li:hover {
        scale: 1.4;
      }

      li {
        position: relative;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        margin-right: 5px;
        opacity: 1;
        transition: all 0.2 ease-in-out;
      }

      li:nth-child(1) {
        background-color: rgb(255, 83, 78);
      }

      li:nth-child(2) {
        background-color: rgb(255, 177, 57);
      }

      li:nth-child(3) {
        background-color: rgb(7, 191, 69);
      }
    }
  }
}

.window:hover {
  cursor: pointer;
}
</style>
